import React, { Component } from 'react'
import './VideoList.css';
import axios from 'axios';
import {Link} from 'react-router-dom'

export default class VideoList extends Component {

    state = {
        data: []
    }

    render() {
        return (
            <div className="video-container">
                <h2>热门视频列表</h2>
                <hr />
                <div className="video-list">
                    {
                        this.state.data.map(item => {
                            return <div key={item.id} className="item">
                                        <div className="cover">
                                            <Link to={{
                                                pathname: '/video',
                                                state: {
                                                    id: item.id
                                                }
                                            }}><img src={item.cover} alt="" /></Link>
                                        </div>
                                        <h4>{item.desc}</h4>
                                    </div>
                        })
                    }
                    
                </div>
            </div>
        )
    }

    // https://api.xiaohigh.com/douyin
    async componentDidMount(){
        //发送请求 获取视频数据
        let result = await axios('http://api.xiaohigh.com/douyin?_limit=20');
        //查看结果
        // console.log(result.data);
        //设置状态数据
        this.setState({
            data: result.data
        })
    }
}
